<template>
  <div class="consultant-detail">
    <!-- 顶部导航栏 -->
    <div class="navbar">
      <div class="nav-back" @click="goBack">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="nav-title">咨询师详情</div>
      <div class="nav-placeholder"></div>
    </div>

    <!-- 内容区域 -->
    <div class="content-section">
      <!-- 基本信息卡片 - 包含头像 -->
      <div class="info-card">
        <!-- 头像区域 -->
        <div class="avatar-section">
          <div class="consultant-avatar">
            <img :src="consultant.imgUrl" alt="" />
            <!-- <div
              class="online-indicator"
              v-if="consultant.availability === 1.0"
            ></div> -->
          </div>
        </div>

        <!-- 统计信息 -->
        <div class="stats-row">
          <div class="stat-item">
            <div class="stat-value">{{ consultant.consulttime }}</div>
            <div class="stat-label">咨询经验(小时)</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ consultant.traintime }}</div>
            <div class="stat-label">受训时长(小时)</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ consultant.workingtime }}</div>
            <div class="stat-label">从业年限</div>
          </div>
        </div>

        <!-- 姓名和满意度 -->
        <div class="name-section">
          <h1 class="consultant-name">{{ consultant.name }}</h1>
        </div>

        <!-- 联系信息 -->
        <div class="contact-info">
          <div class="contact-item">
            <i class="fas fa-phone-alt"></i>
            <span
              >电话咨询{{
                consultant.ispvideo === "Y" ? " / 视频咨询" : ""
              }}</span
            >
          </div>
          <div class="contact-item">
            <i class="fas fa-map-marker-alt"></i>
            <span>{{ consultant.city }}</span>
          </div>
        </div>
      </div>

      <!-- 标签页导航 -->
      <div class="tab-navigation">
        <div
          v-for="tab in tabs"
          :key="tab.id"
          :class="['tab-item', { active: activeTab === tab.id }]"
          @click="activeTab = tab.id"
        >
          <i :class="tab.icon"></i>
          <span>{{ tab.name }}</span>
        </div>
      </div>

      <!-- 主页内容 -->
      <div v-show="activeTab === 'home'" class="tab-content">
        <!-- 我想对你说 -->
        <div class="content-card">
          <div class="card-header">
            <div class="header-icon">
              <i class="fas fa-comment-dots"></i>
            </div>
            <h3>我想对你说</h3>
          </div>
          <div class="card-content">
            <p class="consultant-words">{{ consultant.words }}</p>
          </div>
        </div>

        <!-- 擅长领域 -->
        <div class="content-card">
          <div class="card-header">
            <div class="header-icon">
              <i class="fas fa-star"></i>
            </div>
            <h3>我擅长的领域</h3>
          </div>
          <div class="card-content">
            <div class="domains-grid">
              <div
                v-for="(domain, index) in consultant.domainList"
                :key="index"
                class="domain-item"
              >
                <div class="domain-main">{{ domain.primaryCategory }}</div>
                <div class="domain-subcategories">
                  <span
                    v-for="(sub, subIndex) in domain.secondaryCategories"
                    :key="subIndex"
                    class="subcategory-tag"
                  >
                    {{ sub }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 专业背景 -->
        <div class="content-card">
          <div class="card-header">
            <div class="header-icon">
              <i class="fas fa-graduation-cap"></i>
            </div>
            <h3>我的专业背景</h3>
          </div>
          <div class="card-content">
            <!-- 资质证书 -->
            <div class="background-section">
              <h4 class="section-title">资质证书</h4>
              <div class="certificates">
                <div
                  v-for="(cert, index) in consultant.certificateList"
                  :key="index"
                  class="certificate-item"
                >
                  <i class="fas fa-award"></i>
                  <span>{{ cert }}</span>
                </div>
              </div>
            </div>

            <!-- 学历 -->
            <div class="background-section" v-if="showFullBackground">
              <h4 class="section-title">学历背景</h4>
              <div class="education-item">
                <i class="fas fa-university"></i>
                <span>{{ consultant.education }}</span>
              </div>
            </div>

            <!-- 专业督导 -->
            <div class="background-section" v-if="showFullBackground">
              <h4 class="section-title">专业督导</h4>
              <div class="supervision-item">
                <i class="fas fa-user-graduate"></i>
                <span>累计 {{ consultant.cerdurontime }} 小时督导</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 我与心理学 -->
        <div class="content-card" v-if="showFullBackground">
          <div class="card-header">
            <div class="header-icon">
              <i class="fas fa-heart"></i>
            </div>
            <h3>我与心理学</h3>
          </div>
          <div class="card-content">
            <p class="psychology-story">{{ consultant.meandpsychology }}</p>
          </div>
        </div>
      </div>

      <!-- 可约时间 -->
      <div v-show="activeTab === 'time'" class="tab-content">
        <div class="content-card">
          <div class="card-header">
            <div class="header-icon">
              <i class="fas fa-calendar-alt"></i>
            </div>
            <h3>可约时间 <span class="timezone">(北京时间)</span></h3>
          </div>
          <div class="card-content">
            <div class="schedule-notice">
              <p>选择咨询时间，填写预约信息</p>
            </div>

            <div class="consult-type-tabs">
              <div
                :class="['type-tab', { active: consultTypeActive === 0 }]"
                @click="setConsultType(0)"
              >
                电话咨询
              </div>
              <div
                :class="['type-tab', { active: consultTypeActive === 1 }]"
                @click="setConsultType(1)"
              >
                视频咨询
              </div>
            </div>

            <!-- 日期选择（7天） -->
            <div
              class="date-list"
              v-if="dateListDisplay && dateListDisplay.length"
            >
              <div
                class="date-item"
                v-for="d in dateListDisplay"
                :key="d.key"
                :class="{
                  disabled: !isDateAvailable(d.key),
                  active: selectedDateKey === d.key,
                }"
                @click="selectDate(d.key)"
              >
                <div class="weekday">{{ d.weekday }}</div>
                <div class="day">{{ d.day }}</div>
                <div class="month">{{ d.month }}月</div>
              </div>
            </div>
            <div v-else class="schedule-placeholder">
              <i class="fas fa-clock"></i>
              <p>正在加载日期...</p>
            </div>

            <!-- 时间段列表 -->
            <div class="time-slots">
              <div v-if="!selectedDateKey" class="slots-empty">
                请选择一个日期
              </div>

              <div v-else>
                <div
                  v-if="slotsForSelectedDate.length === 0"
                  class="slots-empty"
                >
                  该日暂无可预约时段
                </div>

                <div v-else class="slots-grid">
                  <div
                    v-for="slot in slotsForSelectedDate"
                    :key="slot.id"
                    class="slot-item"
                    :class="{
                      reserved: slot.reserved === 'Y' || slot.status !== 'Y',
                    }"
                    @click="!isSlotDisabled(slot) && selectTime(slot)"
                  >
                    <div class="slot-time">{{ formatSlotTime(slot) }}</div>
                    <div class="slot-meta">
                      <span v-if="slot.reserved === 'Y'">已被预约</span>
                      <span v-else-if="slot.status !== 'Y'">不可预约</span>
                      <span v-else>可预约</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 预约须知 -->
      <div v-show="activeTab === 'notice'" class="tab-content">
        <div class="content-card">
          <div class="card-header">
            <div class="header-icon">
              <i class="fas fa-info-circle"></i>
            </div>
            <h3>预约须知</h3>
          </div>
          <div class="card-content">
            <div class="notice-item">
              <div class="notice-number">1</div>
              <div class="notice-content">
                <h4>预约确认</h4>
                <p>
                  选定时间、填写并提交预约申请表后，咨询师会在12小时内确认是否接受预约。咨询师接受预约后，您将收到预约已确认的短信提示，请留意查收并按时进行咨询。
                </p>
              </div>
            </div>

            <div class="notice-item">
              <div class="notice-number">2</div>
              <div class="notice-content">
                <h4>咨询方式</h4>
                <p>
                  电话咨询将使用您预留的手机号码进行；视频咨询通常以腾讯会议方式进行（未经双方允许，不可录音录像）。预约确认后，腾讯会议号将通过短信发送给您。
                </p>
              </div>
            </div>

            <div class="notice-item">
              <div class="notice-number">3</div>
              <div class="notice-content">
                <h4>取消与改期</h4>
                <p>
                  如需取消或改期，请至少提前24小时联系客服。临时取消可能会影响您未来的预约权限。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 评价 -->
      <div v-show="activeTab === 'review'" class="tab-content">
        <div class="content-card">
          <div class="card-header">
            <div class="header-icon">
              <i class="fas fa-comments"></i>
            </div>
            <h3>咨询评价</h3>
          </div>
          <div class="card-content">
            <div v-if="evaluations.length === 0" class="reviews-placeholder">
              <i class="fas fa-comment-alt"></i>
              <p>暂无历史评价</p>
            </div>
            <div v-else class="reviews-list">
              <div
                v-for="(item, index) in evaluations"
                :key="index"
                class="review-item"
              >
                <div class="review-top">
                  <span class="satisfaction">{{ item.satisfaction }}</span>
                  <span class="usefulness"
                    >对我有帮助: {{ item.usefulness }}</span
                  >
                  <span class="time">{{ formatDateTime(item.addTime) }}</span>
                </div>
                <div v-if="item.evaluateTheContent" class="review-content">
                  {{ item.evaluateTheContent }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <!-- <div class="action-bar">
      <button class="btn-primary">
        <i class="fas fa-calendar-check"></i>
        <span>立即预约</span>
      </button>
    </div> -->

    <!-- 返回顶部按钮 -->
    <div v-if="showBackToTop" class="back-to-top" @click="scrollToTop">
      <i class="fas fa-chevron-up"></i>
    </div>
  </div>
</template>

<script>
import { detail, planTime, evaluation } from "@/api/user";

export default {
  name: "ConsultantDetail",
  data() {
    return {
      consultantId: null,
      activeTab: "home",
      consultTypeActive: 0, // 0: PHONE, 1: PVIDEO
      showBackToTop: false,
      showFullBackground: true,
      tabs: [
        { id: "home", name: "主页", icon: "fas fa-home" },
        { id: "time", name: "可约时间", icon: "fas fa-clock" },
        { id: "notice", name: "须知", icon: "fas fa-info-circle" },
        { id: "review", name: "评价", icon: "fas fa-star" },
      ],
      consultant: {},

      // 以下为排班相关
      planTimeRaw: null, // raw response data
      availableSlotsByDate: {}, // { 'YYYYMMDD': { PHONE: [...], PVIDEO: [...] } }
      dateListRaw: [], // 原始 dateList（如果接口返回）
      dateListDisplay: [], // [{ key:'YYYYMMDD', year, month, day, weekday }]
      selectedDateKey: "",
      evaluations: [], // 历史评价
    };
  },
  computed: {
    selectedConsultTypeStr() {
      return this.consultTypeActive === 0 ? "PHONE" : "PVIDEO";
    },
    // 返回所选日期对应的时段（按当前 consulttype）
    slotsForSelectedDate() {
      if (!this.selectedDateKey) return [];
      const day = this.availableSlotsByDate[this.selectedDateKey];
      if (!day) return [];
      return day[this.selectedConsultTypeStr] || [];
    },
  },
  created() {
    this.consultantId = this.$route.query.consultantId;
    this.getConsultantDetail();
    this.getplanTime(); // 默认加载 PHONE（consultTypeActive 初始为 0）
    this.getevaluation();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  watch: {
    // 切换咨询类型时重新请求（接口要求 PVIDEO 时传 PVIDEO）
    consultTypeActive(newVal) {
      this.getplanTime();
    },
  },
  methods: {
    getConsultantDetail() {
      let data = {
        consultantId: this.consultantId,
        userId: localStorage.getItem("userId"),
      };
      detail(data).then((res) => {
        if (res.code === 200) {
          this.consultant = res.data;
          // 在拿到 consultant 后决定是否显示完整背景
          this.showFullBackground = ![1277, 1276, 1575].includes(
            this.consultant.id
          );
        }
      });
    },
    getevaluation() {
      let data = {
        consultantId: this.consultantId,
        pageNo: 1,
        pageSize: 10,
      };
      evaluation(data).then((res) => {
        if (res.code === 200 && res.data && Array.isArray(res.data.records)) {
          this.evaluations = res.data.records;
        }
      });
    },
    formatDateTime(str) {
      if (!str) return "";
      const d = new Date(str);
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(d.getDate()).padStart(2, "0")} ${String(
        d.getHours()
      ).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
    },

    // 设置咨询类型（并触发请求）
    setConsultType(typeIndex) {
      if (this.consultTypeActive === typeIndex) return;
      this.consultTypeActive = typeIndex;
    },

    //  获取咨询师排班（会按日期拆分成 PHONE / PVIDEO）
    getplanTime() {
      const consulttypeParam =
        this.selectedConsultTypeStr === "PVIDEO" ? "PVIDEO" : "PHONE";
      const data = {
        consultantId: this.consultantId,
        consulttype: consulttypeParam,
        unitId: localStorage.getItem("unitId"),
        userId: localStorage.getItem("userId"),
      };
      planTime(data).then((res) => {
        if (res && res.code === 200) {
          this.planTimeRaw = res.data || {};
          this.processPlanTime(this.planTimeRaw);
        } else {
          // 出错时也尝试生成未来7天的日期显示
          this.dateListRaw = this.generateNext7Days();
          this.buildDateListDisplay();
        }
      });
    },

    // 处理 planTime 的返回，把每个日期的时段拆分成 PHONE / PVIDEO 两种列表
    processPlanTime(data) {
      const planlist = (data && data.planlist) || {};
      this.availableSlotsByDate = {};
      Object.keys(planlist).forEach((dateKey) => {
        const slots = planlist[dateKey] || [];
        // 初始化
        this.availableSlotsByDate[dateKey] = { PHONE: [], PVIDEO: [] };
        slots.forEach((s) => {
          const consulttypes = (s.consulttype || "")
            .split(",")
            .map((x) => x.trim());
          if (consulttypes.includes("PHONE")) {
            this.availableSlotsByDate[dateKey].PHONE.push(s);
          }
          if (consulttypes.includes("PVIDEO")) {
            this.availableSlotsByDate[dateKey].PVIDEO.push(s);
          }
        });
      });

      // 日期来源：优先使用接口返回的 dateList，否则生成未来7天
      if (data && Array.isArray(data.dateList) && data.dateList.length > 0) {
        this.dateListRaw = data.dateList;
      } else {
        this.dateListRaw = this.generateNext7Days();
      }

      this.buildDateListDisplay();

      // 默认选中最近一个有可约时段的日期（当前咨询类型）
      // 如果没有则选第一个
      const firstAvailable = this.dateListDisplay.find((d) =>
        this.isDateAvailable(d.key)
      );
      this.selectedDateKey = firstAvailable
        ? firstAvailable.key
        : this.dateListDisplay[0]
        ? this.dateListDisplay[0].key
        : "";
    },

    // 将 dateListRaw 转成统一的展示格式 dateListDisplay
    buildDateListDisplay() {
      this.dateListDisplay = (this.dateListRaw || []).map((item) => {
        // 多种可能：字符串 '20250930'，或对象 {monthOfYear,dayOfMonth,year,...}，或 {date:'2025-09-30'} 等
        if (typeof item === "string") {
          // 预期 'YYYYMMDD'
          const key = item;
          const year = parseInt(item.slice(0, 4), 10);
          const month = parseInt(item.slice(4, 6), 10);
          const day = parseInt(item.slice(6, 8), 10);
          const dt = new Date(year, month - 1, day);
          return { key, year, month, day, weekday: this.getWeekdayLabel(dt) };
        } else if (typeof item === "object") {
          if ("year" in item && "monthOfYear" in item && "dayOfMonth" in item) {
            const year = item.year;
            const month = item.monthOfYear;
            const day = item.dayOfMonth;
            const key = `${year}${String(month).padStart(2, "0")}${String(
              day
            ).padStart(2, "0")}`;
            const dt = new Date(year, month - 1, day);
            return { key, year, month, day, weekday: this.getWeekdayLabel(dt) };
          } else if (item.date) {
            const dt = new Date(item.date);
            const year = dt.getFullYear();
            const month = dt.getMonth() + 1;
            const day = dt.getDate();
            const key = `${year}${String(month).padStart(2, "0")}${String(
              day
            ).padStart(2, "0")}`;
            return { key, year, month, day, weekday: this.getWeekdayLabel(dt) };
          } else {
            // fallback -> 使用今天
            const dt = new Date();
            const year = dt.getFullYear();
            const month = dt.getMonth() + 1;
            const day = dt.getDate();
            const key = `${year}${String(month).padStart(2, "0")}${String(
              day
            ).padStart(2, "0")}`;
            return { key, year, month, day, weekday: this.getWeekdayLabel(dt) };
          }
        }
        // 最后兜底
        const dt = new Date();
        const year = dt.getFullYear();
        const month = dt.getMonth() + 1;
        const day = dt.getDate();
        const key = `${year}${String(month).padStart(2, "0")}${String(
          day
        ).padStart(2, "0")}`;
        return { key, year, month, day, weekday: this.getWeekdayLabel(dt) };
      });
    },

    // 生成未来 7 天（包括今天）的 dateListRaw（对象格式）
    generateNext7Days() {
      const arr = [];
      const today = new Date();
      for (let i = 0; i < 7; i++) {
        const d = new Date(today);
        d.setDate(today.getDate() + i);
        arr.push({
          year: d.getFullYear(),
          monthOfYear: d.getMonth() + 1,
          dayOfMonth: d.getDate(),
        });
      }
      return arr;
    },

    // 格式化星期（中文）
    getWeekdayLabel(dateObj) {
      const map = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      return map[dateObj.getDay()];
    },

    // 判断某个日期 key 是否在 dateListDisplay 中
    isDatePresent(key) {
      return this.dateListDisplay.some((d) => d.key === key);
    },

    // 判断某个日期 key 是否存在可约时段（当前 consultType）
    isDateAvailable(key) {
      const day = this.availableSlotsByDate[key];
      if (!day) return false;
      const arr = day[this.selectedConsultTypeStr];
      return Array.isArray(arr) && arr.length > 0;
    },

    // 选择日期
    selectDate(key) {
      // 如果该日期不可约也允许选中（用户可能想看无时段提示），但按你的要求如果不可约要标灰，可以仍允许选中展示“暂无可预约时段”
      this.selectedDateKey = key;
    },

    // 时间段显示格式，例如 "09:00 - 10:00"
    formatSlotTime(slot) {
      // 优先使用 planstarttime / planendtime 字段（格式 '0900'）
      const start =
        slot.planstarttime ||
        (slot.plantime
          ? slot.plantime.slice(-4, -2) + ":" + slot.plantime.slice(-2)
          : "");
      const end = slot.planendtime || "";
      const format = (t) => {
        if (!t) return "";
        if (t.length === 4 && /^\d{4}$/.test(t)) {
          return t.slice(0, 2) + ":" + t.slice(2);
        }
        return t;
      };
      const s = format(start);
      const e = format(end);
      return e ? `${s} - ${e}` : s;
    },

    // 点击时间段（跳转到预约页），consulttype 为 PHONE 或 PVIDEO
    selectTime(slot) {
      const consulttype = this.selectedConsultTypeStr;
      // 跳转到你项目的预约页面并带上参数（这里用 /booking 通用示例）
      this.$router.push({
        path: "/appointment/from",
        query: {
          consultantId: this.consultantId,
          plantime: slot.plantime,
          consulttype,
        },
      });
    },

    // 某时段是否不可点击
    isSlotDisabled(slot) {
      return slot.reserved === "Y" || slot.status !== "Y";
    },

    goBack() {
      this.$router.go(-1);
    },
    handleScroll() {
      this.showBackToTop = window.pageYOffset > 300;
    },
    scrollToTop() {
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
    formatDate(dateStr) {
      if (!dateStr) return "";
      return dateStr.replace(/-/g, "/");
    },
  },
};
</script>
<style scoped>
/* 基础样式 */

.consultant-detail {
  max-width: 500px;
  margin: 0 auto;
  background-color: #f5f7fa;
  padding-bottom: 80px;
}

/* 导航栏 */
.navbar {
  max-width: 500px;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-back:hover {
  background: #e0e0e0;
}

.nav-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.nav-placeholder {
  width: 40px;
}

/* 内容区域 */
.content-section {
  margin-top: 80px;
  padding: 0 15px;
}

/* 信息卡片 */
.info-card {
  background: white;
  border-radius: 20px;
  padding: 120px 20px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  margin-bottom: 15px;
}

/* 头像区域 */
.avatar-section {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  width: 100%;
}

.consultant-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 6px solid white;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 10;
}

.consultant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.online-indicator {
  position: absolute;
  bottom: 8px;
  left: 210px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #4cd964;
  border: 3px solid white;
}

/* 统计信息 */
.stats-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #4a76c8;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #888;
}

/* 姓名和满意度 */
.name-section {
  text-align: center;
  margin-bottom: 20px;
}

.consultant-name {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.satisfaction-rate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.rate-text {
  font-size: 14px;
  color: #666;
}

.stars {
  display: flex;
}

.stars i {
  color: #ddd;
  font-size: 14px;
  margin-right: 2px;
}

.stars i.active {
  color: #ffc107;
}

/* 联系信息 */
.contact-info {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  align-items: center;
}

.contact-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.contact-item i {
  margin-right: 8px;
  color: #4a76c8;
  width: 16px;
  text-align: center;
}

/* 标签导航 */
.tab-navigation {
  display: flex;
  background: white;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 15px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 15px 5px;
  font-size: 14px;
  color: #888;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-item i {
  font-size: 18px;
  margin-bottom: 5px;
}

.tab-item.active {
  color: #4a76c8;
  background: #f0f5ff;
  font-weight: 600;
}

.tab-item.active::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  background: #4a76c8;
  border-radius: 2px;
  margin-top: 5px;
}

/* 内容卡片 */
.tab-content {
  padding: 0;
}

.content-card {
  background: white;
  border-radius: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.header-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: #4a76c8;
  font-size: 16px;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.timezone {
  font-size: 12px;
  color: #888;
  font-weight: normal;
}

.card-content {
  padding: 20px;
}

.consultant-words,
.psychology-story {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  text-align: justify;
}

/* 擅长领域 */
.domains-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.domain-item {
  padding: 15px;
  border-radius: 12px;
  background: #f9fafc;
  border-left: 4px solid #4a76c8;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.domain-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 118, 200, 0.15);
}

.domain-main {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.domain-subcategories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subcategory-tag {
  font-size: 12px;
  padding: 4px 10px;
  background: #eef2ff;
  color: #4a76c8;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.subcategory-tag:hover {
  background: #4a76c8;
  color: white;
}

/* 专业背景 */
.background-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dashed #eee;
}

.certificates {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.certificate-item,
.education-item,
.supervision-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #555;
  padding: 8px 0;
}

.certificate-item i,
.education-item i,
.supervision-item i {
  color: #4a76c8;
  margin-right: 8px;
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.training-timeline {
  position: relative;
  padding-left: 20px;
}

.training-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

.training-item {
  position: relative;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #f0f0f0;
}

.training-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.training-item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4a76c8;
}

.training-period {
  font-size: 12px;
  color: #888;
  margin-bottom: 5px;
}

.training-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 3px;
}

.training-duration {
  font-size: 12px;
  color: #4a76c8;
}

/* 预约须知 */
.notice-item {
  display: flex;
  margin-bottom: 20px;
}

.notice-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #4a76c8;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 15px;
  flex-shrink: 0;
}

.notice-content h4 {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.notice-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 咨询类型标签 */
.consult-type-tabs {
  display: flex;
  margin: 15px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f7fa;
}

.type-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.type-tab.active {
  background: #4a76c8;
  color: white;
  font-weight: 600;
}

/* 占位内容 */
.schedule-placeholder,
.reviews-placeholder {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.schedule-placeholder i,
.reviews-placeholder i {
  font-size: 40px;
  margin-bottom: 15px;
  color: #ddd;
}

.schedule-notice {
  text-align: center;
  padding: 10px;
  background: #f0f5ff;
  border-radius: 8px;
  margin-bottom: 15px;
  color: #4a76c8;
  font-size: 14px;
}

/* 底部操作栏 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 10px 15px;
  display: flex;
  gap: 10px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.btn-secondary,
.btn-primary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary {
  background: #f0f0f0;
  color: #666;
}

.btn-primary {
  background: linear-gradient(135deg, #6a91d1 0%, #4a76c8 100%);
  color: white;
  box-shadow: 0 4px 10px rgba(74, 118, 200, 0.3);
}

.btn-secondary:hover {
  background: #e0e0e0;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(74, 118, 200, 0.4);
}

/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 80px;
  right: 15px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #4a76c8;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(74, 118, 200, 0.3);
  transition: all 0.3s ease;
  z-index: 99;
}

.back-to-top:hover {
  background: #3a66b8;
  transform: translateY(-2px);
}

/* 动画效果 */
.consultant-avatar {
  transition: transform 0.3s ease;
}

.consultant-avatar:hover {
  transform: scale(1.05);
}

.domain-item,
.content-card {
  transition: all 0.3s ease;
}

.domain-item:hover,
.content-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
/* 日期列表样式 */
.date-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0;
  margin-bottom: 12px;
}

.date-item {
  min-width: 72px;
  background: #ffffff;
  border: 1px solid #eef2ff;
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.date-item .weekday {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}

.date-item .day {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.date-item .month {
  font-size: 12px;
  color: #aaa;
  margin-top: 4px;
}

.date-item.disabled {
  opacity: 0.45;
  cursor: default;
}

.date-item.active {
  border-color: #4a76c8;
  background: #f0f5ff;
  color: #4a76c8;
}
/* 时间段 */
.time-slots {
  margin-top: 10px;
}

.slots-empty {
  text-align: center;
  color: #999;
  padding: 20px 0;
}

.slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.slot-item {
  padding: 10px;
  border-radius: 8px;
  background: #f9fbff;
  border: 1px solid #e8f0ff;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}

.slot-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(74, 118, 200, 0.12);
}

.slot-item.reserved,
.slot-item.reserved:hover {
  transform: none;
  cursor: default;
  opacity: 0.6;
  box-shadow: none;
}

.slot-time {
  /* font-weight: 700; */
  margin-bottom: 6px;
}

.slot-meta {
  font-size: 12px;
  color: #666;
}

/* 占位 */
.schedule-placeholder,
.reviews-placeholder {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.schedule-placeholder i,
.reviews-placeholder i {
  font-size: 40px;
  margin-bottom: 15px;
  color: #ddd;
}

.schedule-notice {
  text-align: center;
  padding: 10px;
  background: #f0f5ff;
  border-radius: 8px;
  margin-bottom: 15px;
  color: #4a76c8;
  font-size: 14px;
}
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.review-item {
  padding: 15px;
  background: #f9fafc;
  border-radius: 10px;
  border-left: 4px solid #4a76c8;
}

.review-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.review-top .satisfaction {
  font-weight: 600;
  color: #4a76c8;
}

.review-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}
</style>
